<template>
  <div class="page-div">
    <div ref="top" class="page-item">
      <slot name="top"></slot>
    </div>
    <div ref="bottom" class="page-item">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top-BottomPage",
  props:{
    topPercent:{
      type:String,
      default:()=>{
        return '70%';
      }
    },
    bottomPercent:{
      type:String,
      default:()=>{
        return '29%';
      }
    },
  },
  mounted() {
    this.$refs["top"].style.height=this.topPercent;
    this.$refs["bottom"].style.height=this.bottomPercent;
  }
}
</script>
<style scoped>
.page-div{
  width: 100%;
  height: 100%;
}
.page-item{
  width: 100%;
}
</style>